<template>
	<view :style="{'background-color':pageBg}" style="float: left;width: 100%;min-height: 100%;">
		<!-- about-shadow -->
		<view class=" tn-padding-top-sm tn-padding-bottom-sm tn-margin-left tn-margin-right">
			<!-- <tn-list-cell style="margin-top: 5px;" :hover="true" :unlined="true" :radius="true" :fontSize="30"
				v-for="(item, index) in itemList" :key="index" class=" css-theme" :class="[cueTheme]"
				v-if="item.status == 1">
				<view class="tn-flex tn-flex-col-center">
					<view :class="item.cla">
						<view :class="item.icon"></view>
					</view>
					<view class="tn-margin-left-sm tn-flex-1">{{ item.name }}</view>
					<view class="tn-margin-left-sm tn-flex-1" style="font-size: 24px;font-weight: bolder;">
						<text @click.stop="changeOrder(item,1)" class="tn-icon-up-circle" style="margin-right: 10px;"></text>
						<text @click.stop="changeOrder(item,2)" class="tn-icon-down-circle"></text>
					</view>
					<view class="tn-margin-left-sm">
						<view v-if="item.userFeature == null" @click="saveData(item)"
							class="tn-margin-left-sm tn-icon-reduce-circle-fill"
							style="color: #F84B47;font-size: 20px;"></view>
						<view v-else @click="goDel(item)" class="tn-margin-left-sm tn-icon-add-fill"
							style="color: #18B998;font-size: 20px;"></view>
					</view>
				</view>
			</tn-list-cell> -->


			<HM-dragSorts ref="dragSorts" :list="itemList" :autoScroll="true" :feedbackGenerator="true" :listHeight="fullHeight"
				:rowHeight="55" @change="change" @updataList="updataList" @confirm="confirm" @onclick="onclick"></HM-dragSorts>

		</view>
	</view>
</template>
<script>
	var _self
	export default {
		data() {
			return {
				itemList: [
				],
				user: [],
				list: [
					// {
					// 	"name": "花呗",
					// 	"icon": "/static/1.png"
					// },
					// {
					// 	"name": "余额宝",
					// 	"icon": "/static/1.png"
					// },
					// {
					// 	"name": "账户余额",
					// 	"icon": "/static/1.png"
					// },
					// {
					// 	"name": "交通银行信用卡(0001)",
					// 	"icon": "/static/1.png"
					// },
					// {
					// 	"name": "网商储蓄卡(7223)",
					// 	"icon": "/static/1.png"
					// },
					
				],
				fullHeight:0,
			}
		},
		onLoad(options) {
			_self = this;


		},
		onShow() {
			uni.getStorage({
				key: 'user',
				success: function(res) {
					if (res.data) {
						_self.user = res.data
						setTimeout(function() {
							_self.getList()
						}, 200);
					}
				},
				fail: function(e) {
					uni.navigateTo({
						url: '../login/login'
					});
				}
			})

		},
		mounted() {
			var that = this;
			//获取手机屏幕的高度，让其等于swiper的高度，从而使屏幕充满
			uni.getSystemInfo({
				success: function(res) {
					that.fullHeight = res.windowHeight 
				}
			});
		
		},
		methods: {
			push() {
				// 和数组的push使用方法一致，可以push单行，也可以push多行
				this.$refs.dragSorts.push({
					"name": "push行",
					"icon": "/static/img/2.png"
				});
			},
			unshift() {
				// 和数组的unshift使用方法一致，可以unshift单行，也可以unshift多行
				this.$refs.dragSorts.unshift({
					"name": "unshift行",
					"icon": "/static/img/2.png"
				});
			},
			splice() {
				// 和数组的unshift使用方法一致 下标1开始删除1个并在下标1位置插入行
				this.$refs.dragSorts.splice(1, 1, {
					"name": "splice行",
					"icon": "/static/img/2.png"
				});
			},
			onclick(e) {
				console.log('=== onclick start ===');
				console.log("被点击行: " + JSON.stringify(e.value));
				console.log("被点击下标: " + JSON.stringify(e.index));
				console.log('=== onclick end ===');
			},
			change(e) {
				console.log('=== change start ===');
				console.log("被拖动行: " + JSON.stringify(e.moveRow));
				console.log('原始下标：', e.index);
				console.log('移动到：', e.moveTo);
				console.log('=== change end ===');
			},
			confirm(e) {
				// console.log('=== confirm start ===');
				// console.log("被拖动行: " + JSON.stringify(e));
				// console.log('原始下标：', e.index);
				// console.log('移动到：', e.moveTo);
				// console.log('=== confirm end ===');
				var list = e.list
				var data = []
				for(var i=0;i<list.length;i++){
					var item={
						userId:list[i].userId,
						featureId:list[i].featureId,
					}
					data.push(item)
				}
				
				
				console.log("========================")
				console.log(data)
				this.$api.appSortFeature(data).then((res) => {
					var resData = res;
					console.log(resData)
					if (resData.code == "200") {
						_self.getList()
					}
				})
			},
			changeOrder(item, type) {
				console.log(type)
			},
			getList() {
				var data = {
					userId: _self.user.id
				}
				this.$api.listFeatureNew(data).then((res) => {
					var resData = res;
					
					console.log("===================")
					console.log(resData)
					if (resData.code == "200") {
						var list = []
						for (var i = 0; i < resData.data.length; i++) {
							var m = i
							if (i > 15) {
								m = i - 15
							}
							var status = 0
							if (uni.getSystemInfoSync().platform == 'ios') {
								status = resData.data[i].appleShow

							} else {
								status = resData.data[i].androidShow
							}
							var item = {
								userId:_self.user.id,
								featureId: resData.data[i].id,
								userFeature: resData.data[i].userFeature,
								name: resData.data[i].name,
								icon: resData.data[i].icon,
								cla: 'icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-' +
									(m + 1) + ' tn-color-white',
								status: status
							}
							list.push(item)

						}
						_self.itemList = list
						console.log(_self.itemList)
					}
				})

			},
			updataList(){
				_self.getList()
			},
			goDel(item) {

				_self.$api.deleteUserFeature({}, item.userFeature.id).then((res) => {
					var resData = res;
					if (resData.code == "200") {
						_self.getList()
					}
				})

			},
			saveData(item) {

				var data = {
					userId: _self.user.id,
					featureId: item.id,
				}
				console.log(data)
				this.$api.updateUserFeature(data).then((res) => {
					var resData = res;
					if (resData.code == "200") {
						_self.getList()

					}
				})

			},

		}
	}
</script>
<style>
	page {
		height: 100%;

	}
</style>
<style lang="scss">
	page {
		height: 100%;
		width: 100%;
		margin: 0;
		background-color: $page-bg !important;
	}

	.css-theme {
		@include text-color();
		@include base-background();
		@include border-color();
		@include shadow-color();
	}

	.func_title {
		text-align: center;
		font-weight: bold;
	}



	/* 顶部背景图 start */
	.top-backgroup {
		height: 450rpx;
		z-index: -1;

		.backgroud-image {
			width: 100%;
			height: 450rpx;
			// z-index: -1;
		}
	}

	.top_max_box {
		padding-top: 120rpx;
	}

	/* 顶部背景图 end */


	/* 页面 start*/
	.about-shadow {
		border-radius: 15rpx;
		box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	.about {

		&__wrap {
			position: relative;
			z-index: 1;
			// margin: 20rpx 30rpx;
			margin-top: -330rpx;
		}
	}

	/* 页面 end*/

	/* 用户信息 start */
	.user-info {
		&__container {}

		&__avatar {
			width: 170rpx;
			height: 170rpx;
			border: 8rpx solid rgba(255, 255, 255, 0.05);
			border-radius: 50%;
			overflow: hidden;
			box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
		}

		&__nick-name {
			margin-top: 26rpx;
			font-size: 36rpx;
			font-weight: 600;
			text-align: center;
		}
	}

	/* 用户信息 end */
	/* 图标容器1 start */
	.icon1 {
		&__item {
			// width: 30%;
			// background-color: #FFFFFF;
			border-radius: 10rpx;
			padding: 30rpx;
			margin: 20rpx 10rpx;
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 40rpx;
				height: 40rpx;
				font-size: 28rpx;
				border-radius: 50%;
				position: relative;
				z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1);
					background-size: 100% 100%;
					background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
				}
			}
		}
	}

	/* 图标容器1 end */

	/* 底部tabbar start*/
	.footerfixed {
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 999;
		// background-color: #FFFFFF;
		box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	.tabbar {
		display: flex;
		align-items: center;
		min-height: 110rpx;
		justify-content: space-between;
		padding: 0;
		height: calc(110rpx + env(safe-area-inset-bottom) / 2);
		padding-bottom: calc(env(safe-area-inset-bottom) / 2);
	}

	.tabbar .action {
		font-size: 22rpx;
		position: relative;
		flex: 1;
		text-align: center;
		padding: 0;
		display: block;
		height: auto;
		line-height: 1;
		margin: 0;
		overflow: initial;
	}

	.tabbar .action .bar-icon {
		width: 100rpx;
		position: relative;
		display: block;
		height: auto;
		margin: 0 auto 10rpx;
		text-align: center;
		font-size: 42rpx;
	}

	.tabbar .action .bar-icon image {
		width: 50rpx;
		height: 50rpx;
		display: inline-block;
	}

	.user-info__nick-name-top {
		font-weight: bold;
		margin-top: 20rpx;
		font-size: 18px;

	}

	.user-info__nick-name-bottom {
		margin-top: 20rpx;
		color: #A8A8A8;
		font-size: 14px;
		letter-spacing: 10px;
	}
</style>